<template>
    <div class="app-container">
        <el-form :model="searchdata" size="small" :inline="true" v-show="showSearch" label-width="68px">
            <el-form-item label="姓名" prop="nickName">
                <el-input v-model="searchdata.nickName" placeholder="请输入姓名" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="手机号" prop="phonenumber">
                <el-input v-model="searchdata.phonenumber" onkeyup="value=value.replace(/[^0-9.]/g,'')" placeholder="请输入手机号"
                    clearable style="width: 180px;" @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="冻结时间">
                <el-date-picker v-model="searchdata.starttime" type="date" value-format="timestamp"
                    :picker-options="startDatePicker" placeholder="开始时间" style="width: 150px">
                </el-date-picker>
                <el-date-picker v-model="endtimes" type="date" value-format="timestamp" :picker-options="endDatePicker"
                    placeholder="结束时间" style="width: 150px">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索
                </el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="forzenList">
            <el-table-column label="姓名" align="center" prop="nickName" />
            <el-table-column label="手机号" align="center" prop="phonenumber" />
            <el-table-column label="冻结时间" align="center" prop="createTime">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.createTime, '{YY}-{MM}-{DD} {hh}:{mm}:{ss}') }}</span>
                </template>
            </el-table-column>
            <el-table-column label="账户余额" align="center" prop="puHaveMoney" />
            <el-table-column label="冻结金额" align="center" prop="cmmoney" />
            <el-table-column label="已解冻金额" align="center" prop="jdmoney" />
            <el-table-column label="剩余解冻金额" align="center" prop="shengyumoney" />
            <el-table-column label="备注" align="center" prop="remark">
                <template slot-scope="scope">{{ scope.row.remark || '暂无' }}</template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-edit" v-if="scope.row.shengyumoney != 0"
                        @click="thaw(scope.row)">解冻</el-button>
                    <el-button size="mini" type="text" icon="el-icon-edit" v-if="scope.row.cmmoney != 0"
                        @click="handlethaw(scope.row)">解冻详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="searchdata.pageNum" :limit.sync="searchdata.pageSize"
            @pagination="getList" />
        <!-- 解冻金额操作 -->
        <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @close="close">
            <el-form :model="form" ref="form" :rules="rules" size="small" :inline="true" label-width="150px">
                <el-form-item label="解冻金额" prop="cmmoneys" style="width:600px">
                    <el-input v-model.trim="form.cmmoneys" placeholder="请输入解冻金额" type="text" clearable style="width: 400px">
                    </el-input>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="form.remark" placeholder="备注" type="textarea" clearable style="width: 400px">
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="sbumit">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
        <!--解冻金额详情  -->
        <el-dialog :title="title1" :visible.sync="open1" width="800px" append-to-body>
            <el-table :data="jiedongList">
                <el-table-column label="解冻时间" align="center" prop="createTime">
                    <template slot-scope="scope">
                        <span>{{ parseTime(scope.row.createTime, '{YY}-{MM}-{DD} {hh}:{mm}:{ss}') }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="解冻金额" align="center" prop="cmmoney" />
                <el-table-column label="备注" align="center" prop="remark">
                    <template slot-scope="scope">{{ scope.row.remark || '暂无' }}</template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>
<script>
import { selectAllmingxidongjie, insertjiedong, selectAlljiedong } from "@/api/puser/account.js"
export default {
    name:'forzen',
    data() {
        return {
            endtimes: '',
            jiedongList: [],
            searchdata: {
                starttime: '',
                endtime: '',
                nickName: '',
                phonenumber: '',
                userId: this.$route.query.userId || '',
                pageNum: 1,
                pageSize: 10,
            },
            showSearch: true,
            title: '',
            title1: '',
            open: false,
            open1: false,
            total: 0,
            forzenList: [],
            loading: true,
            form: {
                userId: '',
                cmmoneys: '',
                remark: '',
                id: ''
            },
            puFieezeMoney: '',
            rules: {
                cmmoneys: [{ required: true, message: "解冻金额不能为空", trigger: "blur" }]
            },
            shengyumoney: '',
            date: {
                userId: '',
            },
            startDatePicker: this.beginDate(),
            endDatePicker: this.processDate(),
        }
    },
    created() {
        this.getList();
    },
    methods: {
        async getList() {
            let res = await selectAllmingxidongjie(this.searchdata);
            if (res.code == 200) {
                this.forzenList = res.rows;
                this.total = res.total;
            }
        },
        // 解冻操作
        thaw(row) {
            this.open = true;
            this.title = "解冻";
            this.form.userId = row.userId;
            this.form.id = row.id
            this.shengyumoney = row.shengyumoney;
            this.puFieezeMoney = row.puFieezeMoney;
        },
        sbumit() {
            this.$refs["form"].validate(valid => {
                if (valid && this.form.cmmoneys <= this.shengyumoney) {
                    insertjiedong(this.form).then(response => {
                        this.form = {
                            userId: '',
                            cmmoney: '',
                            remark: '',
                            id: ''
                        }
                        this.open = false;
                        this.getList();
                        this.$modal.msgSuccess(response.data.msg);
                    })
                } else if (this.form.cmmoneys > this.shengyumoney) {
                    this.$modal.msgError('解冻金额小于冻结金额')
                }
            })

        },
        cancel() {
            this.open = false;
            this.form = {
                userId: '',
                cmmoney: '',
                remark: ''
            },
                this.$refs["form"].resetFields();
        },
        close() {
            this.cancel();
        },
        // 解冻金额详情
        handlethaw(row) {
            this.title1 = "解冻金额详情";
            this.open1 = true;
            this.date.userId = row.userId;
            selectAlljiedong(this.date).then(response => {
                if (response.code == 200) {
                    this.jiedongList = response.rows;
                }
            })
        },
        // 搜索
        handleQuery() {
            if (this.searchdata.starttime == '' && this.endtimes == "") {
                selectAllmingxidongjie(this.searchdata).then(response => {
                    if (response.code == 200) {
                        this.forzenList = response.rows;
                        this.total = response.total;
                    }
                })
            } else if (this.searchdata.starttime == "" && this.endtimes != '') {
                this.$modal.msgError("请输入开始时间");
            } else if (this.searchdata.starttime != '' && this.endtimes == '') {
                this.$modal.msgError("请输入结束时间");
            } else if (this.searchdata.starttime != '' && this.endtimes != '' && this.searchdata.starttime > this.endtimes) {
                this.$modal.msgError("结束时间必须大于开始时间");
            } else if (this.searchdata.starttime != '' && this.endtimes != '' && this.searchdata.starttime < this.endtimes) {
                this.searchdata.endtime = this.endtimes + 24 * 60 * 60 * 1000 - 1;
                selectAllmingxidongjie(this.searchdata).then(response => {
                    if (response.code == 200) {
                        this.forzenList = response.rows;
                        this.total = response.total;
                    }
                })
            } else if (this.queryParams.startTime == this.queryParams.endTime) {
                this.$modal.msgError("结束时间必须大于开始时间");
            }
        },
        resetQuery() {
            this.searchdata = {
                starttime: '',
                endtime: '',
                nickName: '',
                phonenumber: '',
                userId: this.$route.query.userId || '',
                pageNum: 1,
                pageSize: 10,
            },
                this.getList();
            this.endtimes = "";
        },
        // 验证搜索框日期
        beginDate() {
            const self = this;
            return {
                disabledDate(time) {
                    //           debugger;
                    if (self.endTime) {
                        //如果结束时间不为空，则小于结束时间
                        return new Date(self.endTime).getTime() < time.getTime();
                    } else {
                        return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
                    }
                },
            };
        },
        processDate() {
            const self = this;
            return {
                disabledDate(time) {
                    if (self.startTime) {
                        //如果开始时间不为空，则结束时间大于开始时间
                        return new Date(self.startTime).getTime() > time.getTime();
                    } else {
                        return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
                    }
                },
            };
        },
    }
}
</script>